<template>
    <div class="page-login">
        <!-- 
            label-placement="left"  标签显示的位置 左边
            label-width="auto"    自动调整标签的宽度
            :model="model"        数据
            :rules="rules"       验证规则

        -->
        <n-form class="login-form"  
            label-placement="left"  
            label-width="auto"  
            :model="model"
            :rules="rules"
            ref="formRef"
            >
            <n-form-item label="用户名" path="username">
                <!-- v-model在组件上的展开形式不同，此时需要的是Value，所以带了： -->
                <n-input v-model:value = "model.username" placeholder="请输入username"/>
            </n-form-item>

            <n-form-item label="密码" path="password">
                <n-input v-model:value = "model.password" type="password" placeholder="请输入password"/>
            </n-form-item>

            <n-form-item >
                <n-button block type="primary" :loading="loading" @click="handleClick">登录1</n-button>
            </n-form-item>
        </n-form>


   </div>
</template>
<script>
// 引入 login方法
import { login } from "@/api/user";

export default{
    data(){
        return{
            model:{
                username:'',  //用户
                password:"",  //密码
            },
            rules:{
                username:[
                    { required:true,message:'请输入用户名',trigger:"blur" },
                    // { min:3,max:8,message:'输入正确的用户名',trigger:"blur"}
                ],
                password:[
                    { required:true,message:'请输入密码',trigger:"blur" }
                ],
            },
            // 用户表示 当前登录请求是否正在加载中
            loading:false,        
        }
    },
    methods:{
        // 登录按钮 点击
        handleClick(){
            // 0.触发表单校验；使用ref标记表单组件，得到表单组件的实例对象，调用它的一些方法
            this.$refs.formRef.validate((error)=>{
                console.log('error',error);
                // 判断error是否有值
                if(error){
                    // error有值,表单校验不通过
                    console.log('error1',error);
                    return;
                }

                // 校验通过，往下继续执行；  
                // 调用接口，登录
                //    1. 可以直接使用 utils/request.js
                //    2. 可将所有的接口调用封装成一个函数，直接调用函数。（使用这种）

                // login(this.model.username,this.model.password)
                // .then((response)=>{
                //     console.log('response',response);
                //     // 判断response.data.code 是否等于 200 （200成功）
                //     if(response.data.code === '200') {
                //         // alert('登录成功');
                //         this.$message.success(response.data.message)
                //     }else{
                //         // 登录失败，给用户提示；可使用 后端返回的 错误提示message里的信息
                //         // alert(response.data.message || '登录失败')
                //         this.$message.error(response.data.message || '登录失败')
                //     }                    
                // }).catch((error)=>{
                //     console.log('error',error);
                // });

                /**
                 * 优化描述：
                 * 上面的登录接口：需要在 .then 里面判断 业务状态码是否为 '200'。且后续的所有接口，都需要有这样一段判断逻辑，过于麻烦。
                 * 可以将这段判断逻辑写入到 axios封装的响应拦截器中。
                */

                // 将this.loading 设置成 true,表示正在调用接口
                this.loading = true;
                login(this.model.username,this.model.password)
                .then((response)=>{
                    // 这里的response 直接就是后端的响应数据（在axios的响应拦截器中做了处理）
                    console.log('response666',response);
                    this.$message.success('登录成功')
                })   // .catch可去掉，在响应拦截器中可以输出 错误信息
                .finally(()=>{
                    // finally表示：不管成功还是失败，都会执行的回调
                    // this.loading 设置成 false, 表示接口调用完成
                    this.loading = false;
                })
            })
        }
    } 
}
</script>
<style lang="scss" scoped>
.page-login{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(96, 221, 246);
    height: 100%;
    .login-form{
        width: 300px;
        background-color: #fff;
        border-radius: 15px;
        padding: 30px;
    }
}

</style>